<template>
  <div class="index_box">
    <el-menu
      style="position: fixed; z-index: 100"
      class="el-menu-demo
              right-align-menu
              with-shadow
              fixed-top"
      default-active="1"
      mode="horizontal" @select="handleSelect">
      <el-menu-item index="1" @click="navigateTo('home')">
        <i class="el-icon-s-home"></i>主页
      </el-menu-item>
      <el-menu-item index="2" @click="navigateTo('news')">
        <i class="el-icon-s-promotion"></i> 最新动态
      </el-menu-item>
      <el-menu-item index="3" @click="navigateTo('my-club')">
        <i class="el-icon-s-flag"></i> 我的社团
      </el-menu-item>
      <el-menu-item index="4" @click="navigateTo('message')">
        <i class="el-icon-s-comment"></i> 消息中心
      </el-menu-item>
      <el-menu-item index="5" @click="navigateTo('personal')">
        <i class="el-icon-s-custom"></i> 个人中心
      </el-menu-item>
      <el-menu-item>
        <el-avatar shape="circle"
                   src="https://q4.itc.cn/q_70/images03/20240320/fa9cbc01b49c43cf94b3f47285d6e208.jpeg"></el-avatar>
      </el-menu-item>
    </el-menu>
    <router-view/>
  </div>
</template>

<script>


export default {

  methods: {
    navigateTo(path){
      console.log(this.$route)
      this.$router.push({name:path})
    }
  }
}
</script>

<style>
.right-align-menu {
  justify-content: flex-end;
  display: flex;
}

.with-shadow {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 添加阴影效果，水平偏移0，垂直偏移2px，模糊半径4px，阴影颜色为rgba(0, 0, 0, 0.1) */
}

.fixed-top {
  margin-bottom: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100; /* 确保导航栏在其他元素之上 */
}
</style>
